<%--
  Created by IntelliJ IDEA.
  User: Dhy
  Date: 2023/9/6
  Time: 14:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>搜索</title>
    <style>
        .layui-zidingyi{
            width: 300px;
            margin-left: 30px;
            /*border: 1px solid black;*/
        }
        .layui-table-cell{
            height: 90px;
            line-height: 90px;
        }
        /*.laytable-cell-1-0-0:nth-of-type(1){*/
        /*    height: 20px;*/
        /*}*/
    </style>
</head>
<body>
<div style="padding: 16px;">
<%--    通过form表单创建搜索查询框--%>
    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-form-item">
<%--            学生姓名--%>
            <div class="layui-col-md4">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="student_name" placeholder="请输入学生姓名" class="layui-input" lay-affix="clear">
                </div>
            </div>
<%--            通过下拉框搜索教师id--%>
            <div class="layui-col-md4">
                <div class="layui-input-wrap">
                    <select  name="teacher_id"></select>
                </div>
            </div>
<%--    搜索和清空按钮--%>
            <div class="layui-btn-container layui-col-xs12 layui-zidingyi">
                <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
                <button type="reset" class="layui-btn layui-btn-primary">清空</button>
            </div>
        </div>
    </form>

    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
    </div>
</script>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['table', 'dropdown','form'], function(){
        // debugger
        var form = layui.form;
        var table = layui.table;
        var dropdown = layui.dropdown;

        // 创建渲染实例
        table.render({
            elem: '#test',//
            url: '${pageContext.request.contextPath}/student?method=getForPage', // 此处为静态模拟数据，实际使用时需换成真实接口
            page: true, //是否分页
            cols: [[
                {field:'studentId', fixed: 'left', width:80,height:20, title: 'ID', sort: true},
                {field:'photo', width:130,title: '图片',templet: function(d){
                        return '<img src="${pageContext.request.contextPath}/upload/'+d.photo+'">'
                    }},
                {field:'studentName', width:134, title: '用户名'},
                {field:'studentPassword', width:134,height:90, title: '密码'},
                {field:'studentSex', width:40,height:90, title: '性别'},
                {field:'studentAge', width:134, height:90,title: '年龄'},
                {field:'email', width:134, height:90,title: '邮箱'},
                {field:'teacher_name', width:134,height:90, title: '老师'},
                {field:'status', width:134,height:90, title: '状态',templet:function (d) {
                        return['在校','离校'][d.status];
                    }},
                {fixed: 'right',title: '操作',width: 134,height:90,minWidth:125,toolbar:'#barDemo'}
            ]],
            parseData: function(res){
                // console.log(res)
                return{
                    "code":res.code,    //解析窗口状态
                    "msg":res.msg,  //解析提示文本
                    "count":res.res.count,  //解析数据长度
                    "data":res.res.list //解析数据列表
                };
            },
            error:function(res,msg){
                console.log(res,msg)
            }
        });

        // 触发单元格工具事件
        table.on('tool(test)', function(obj){ // 双击 toolDouble
            // debugger
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            dept = data;
            if(obj.event === 'edit'){
                layer.open({
                    title: '编辑',
                    type: 2,
                    area: ['80%','80%'],
                    content: '${pageContext.request.contextPath}/Student/studentedit.jsp',
                    end: function () {
                        table.reload('test');
                    }
                });
            } else {//删除

                layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){
                    // do something
                    $.ajax({
                        url: "${pageContext.request.contextPath}/student?method=delete&id="+obj.data.studentId,   // ajax请求地址 地址/开头是接口，直接写是页面
                        type: 'get',  // 请求的方式，get\post
                        dataType: 'json', // 、json
                        success: function(result){  // 请求成功时的回调， result请求返回的数据。
                            if (result.code === 200){
                                //表格重新加载
                                table.reload('test');
                            }
                        }
                    });
                    layer.close(index);
                });

            }
        });

        // 搜索提交
        form.on('submit(demo-table-search)', function(data){
            // debugger
            var field = data.field; // 获得表单字段
            console.log(field)
            // 执行搜索重载
            table.reload('test', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            layer.msg('搜索成功');
            return false; // 阻止默认 form 跳转
        });

        //获取教师信息
        $.ajax({
            url:'${pageContext.request.contextPath}/teacher?method=teacherList',
            type:'get',
            dataType:'json',
            success:function (result) {
                var html = '<option value="">请选择老师</option>';
                if (result.code === 0){
                    // alert(result.res);
                    //循环取数据
                    $.each(result.res,function (index,item) {
                        html += '<option value="'+ item.teacherId+'">'+item.teacherName+'</option>'
                        $('[name="teacher_id"]').html(html);
                        form.render();
                    })
                }
            }
        })
    });
</script>
</body>
</html>
